<template>
	<div class="p_20 indexBanner">
		<el-dialog :visible.sync="isShow" width="60%" :close-on-click-modal="false" @close="closeDialog">
			<!-- <el-divider></el-divider> -->
			<el-form :model="form" label-width="80px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="产品名称">
							<el-input v-model="form.name" ></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="靶点">
							<el-input v-model="form.target"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-form-item label="副标题">
						<el-input v-model="form.subtitle" class="w_400"></el-input>
					</el-form-item>
				</el-row>
				
				<el-form-item label="产品分类">
					<el-select v-model="form.category_id" >
						<el-option  
							v-for="item in opt"
							:key="item.id"
							:value="item.id"
							:label="item.name"
						>
						</el-option>
					</el-select>
				</el-form-item>
				
				<!-- <UploadImg ref="UploadImg" :upImg = "upImg"></UploadImg> -->
				
				<el-form-item label="简介">
					<el-input v-model="form.synopsis" type="textarea" :rows="8"></el-input>
				</el-form-item>
				
				<el-divider  content-position="left">产品管线</el-divider>
				<div class="flex justify_content_end">
					<el-button size="small" type="primary" @click="addgx">新增</el-button>
				</div>
				<el-table  width='100%' :data="gx">
					
					<el-table-column label='临床前' prop='preclinical'></el-table-column>
					<el-table-column label='临床一期' prop='phase1'></el-table-column>
					<el-table-column label='临床二期' prop='phase2'></el-table-column>
					<el-table-column label='临床三期' prop='phase3'></el-table-column>
					<el-table-column label='NDA' prop='nda'></el-table-column>
					<el-table-column label='临床试验地区' prop='clinical_area'></el-table-column>
					<el-table-column label='操作' prop='phase1'>
						<template slot-scope="scope">
							<el-button size="small" @click="editgx(scope.row,scope.$index)">编辑</el-button>
							<el-button size="small" @click="deletegx(scope)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				
				<el-divider content-position="left">标题内容</el-divider>
				<div class="flex justify_content_end">
					<el-button size="small" type="primary" @click="addnr">新增</el-button>
				</div>
				<el-table  width='100%' :data="nr">
					
					<el-table-column label='标题' prop='title'></el-table-column>
					<el-table-column label='类型' prop='type'>
						<template slot-scope="scope">
							<span v-if="scope.row.type == 0">富文本</span>
							<span v-if="scope.row.type == 1">管线类</span>
							<span v-else-if="scope.row.type == 2">文献类</span>
						</template>
					</el-table-column>
					<el-table-column label='排序' prop='sort'></el-table-column>
					<el-table-column label='操作' prop='sort'>
						<template slot-scope="scope">
							<el-button size="small" @click="editnr(scope.row,scope.$index)">编辑</el-button>
							<el-button size="small" @click="deletenr(scope)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeDialog">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
		
		<el-dialog :visible.sync="isShow1" width="60%"  @close="close1" append-to-body>
			<el-divider content-position="left">图标内</el-divider>
			<el-form  label-width="80px" v-model="gxForm">
				<el-form-item label="临床前" >
					<el-select v-model="gxForm.preclinical[0]" class="m_r_20">
						<el-option value="蓝" label="蓝"></el-option>
						<el-option value="红" label="红"></el-option>
						<el-option value="黑" label="黑"></el-option>
					</el-select>
					<el-select v-model="gxForm.preclinical[1]" class="m_r_20" >
						<el-option value="无" label="无"></el-option>
						<el-option value="10%" label="10%"></el-option>
						<el-option value="20%" label="20%"></el-option>
						<el-option value="30%" label="30%"></el-option>
						<el-option value="40%" label="40%"></el-option>
						<el-option value="50%" label="50%"></el-option>
						<el-option value="60%" label="60%"></el-option>
						<el-option value="70%" label="70%"></el-option>
						<el-option value="80%" label="80%"></el-option>
						<el-option value="90%" label="90%"></el-option>
						<el-option value="100%" label="100%"></el-option>
					</el-select>
					<el-select v-model="gxForm.preclinical[2]" class="m_r_20" >
						<el-option value="尖" label="尖"></el-option>
						<el-option value="平" label="平"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="临床一期">
					<el-select v-model="gxForm.phase1[0]" class="m_r_20">
						<el-option value="蓝" label="蓝"></el-option>
						<el-option value="红" label="红"></el-option>
						<el-option value="黑" label="黑"></el-option>
					</el-select>
					<el-select v-model="gxForm.phase1[1]" class="m_r_20" >
						<el-option value="无" label="无"></el-option>
						<el-option value="10%" label="10%"></el-option>
						<el-option value="20%" label="20%"></el-option>
						<el-option value="30%" label="30%"></el-option>
						<el-option value="40%" label="40%"></el-option>
						<el-option value="50%" label="50%"></el-option>
						<el-option value="60%" label="60%"></el-option>
						<el-option value="70%" label="70%"></el-option>
						<el-option value="80%" label="80%"></el-option>
						<el-option value="90%" label="90%"></el-option>
						<el-option value="100%" label="100%"></el-option>
					</el-select>
					<el-select v-model="gxForm.phase1[2]" class="m_r_20" >
						<el-option value="尖" label="尖"></el-option>
						<el-option value="平" label="平"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="临床二期">
					<el-select v-model="gxForm.phase2[0]" class="m_r_20">
						<el-option value="蓝" label="蓝"></el-option>
						<el-option value="红" label="红"></el-option>
						<el-option value="黑" label="黑"></el-option>
					</el-select>
					<el-select v-model="gxForm.phase2[1]" class="m_r_20" >
						<el-option value="无" label="无"></el-option>
						<el-option value="10%" label="10%"></el-option>
						<el-option value="20%" label="20%"></el-option>
						<el-option value="30%" label="30%"></el-option>
						<el-option value="40%" label="40%"></el-option>
						<el-option value="50%" label="50%"></el-option>
						<el-option value="60%" label="60%"></el-option>
						<el-option value="70%" label="70%"></el-option>
						<el-option value="80%" label="80%"></el-option>
						<el-option value="90%" label="90%"></el-option>
						<el-option value="100%" label="100%"></el-option>
					</el-select>
					<el-select v-model="gxForm.phase2[2]" class="m_r_20" >
						<el-option value="尖" label="尖"></el-option>
						<el-option value="平" label="平"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="临床三期">
					<el-select v-model="gxForm.phase3[0]" class="m_r_20">
						<el-option value="蓝" label="蓝"></el-option>
						<el-option value="红" label="红"></el-option>
						<el-option value="黑" label="黑"></el-option>
					</el-select>
					<el-select v-model="gxForm.phase3[1]" class="m_r_20" >
						<el-option value="无" label="无"></el-option>
						<el-option value="10%" label="10%"></el-option>
						<el-option value="20%" label="20%"></el-option>
						<el-option value="30%" label="30%"></el-option>
						<el-option value="40%" label="40%"></el-option>
						<el-option value="50%" label="50%"></el-option>
						<el-option value="60%" label="60%"></el-option>
						<el-option value="70%" label="70%"></el-option>
						<el-option value="80%" label="80%"></el-option>
						<el-option value="90%" label="90%"></el-option>
						<el-option value="100%" label="100%"></el-option>
					</el-select>
					<el-select v-model="gxForm.phase3[2]" class="m_r_20" >
						<el-option value="尖" label="尖"></el-option>
						<el-option value="平" label="平"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="NDA">
					<el-select v-model="gxForm.nda[0]" class="m_r_20">
						<el-option value="蓝" label="蓝"></el-option>
						<el-option value="红" label="红"></el-option>
						<el-option value="黑" label="黑"></el-option>
					</el-select>
					<el-select v-model="gxForm.nda[1]" class="m_r_20" >
						<el-option value="无" label="无"></el-option>
						<el-option value="10%" label="10%"></el-option>
						<el-option value="20%" label="20%"></el-option>
						<el-option value="30%" label="30%"></el-option>
						<el-option value="40%" label="40%"></el-option>
						<el-option value="50%" label="50%"></el-option>
						<el-option value="60%" label="60%"></el-option>
						<el-option value="70%" label="70%"></el-option>
						<el-option value="80%" label="80%"></el-option>
						<el-option value="90%" label="90%"></el-option>
						<el-option value="100%" label="100%"></el-option>
					</el-select>
					<el-select v-model="gxForm.nda[2]" class="m_r_20" >
						<el-option value="尖" label="尖"></el-option>
						<el-option value="平" label="平"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="试验地区">
					<el-input class="w_400" v-model="gxForm.area"></el-input>
				</el-form-item>
				
				<el-divider content-position="left">下拉显示内容</el-divider>
				
				<el-form-item label="临床试验地区" label-width="120px">
					<el-input class="w_400" v-model="gxForm.clinical_area"></el-input>
				</el-form-item>
				
				<el-form-item label="开发来源">
					<el-input class="w_400" v-model="gxForm.origin"></el-input>
				</el-form-item>
				
				<el-form-item label="适应性">
					<el-input class="w_400" v-model="gxForm.adaptability" type="textarea" :rows="8"></el-input>
				</el-form-item>
			</el-form>
			
			<span slot="footer" class="dialog-footer">
				<el-button @click="close1">取 消</el-button>
				<el-button type="primary" @click="sub1">确 定</el-button>
			</span>
		</el-dialog>
		
		
		<el-dialog :visible.sync="isShow2" width="60%"  @close="close2" append-to-body>
			<el-form  label-width="80px" v-model="nrForm">
				
				
				<el-form-item label="标题">
					<el-input class="w_400" v-model="nrForm.title"></el-input>
				</el-form-item>
				
				<el-form-item label="类型">
					<el-select v-model="nrForm.type"  class="m_r_20"  @change="getResource">
						<el-option :value="0" label="富文本"></el-option>
						<el-option :value="1" label="管线资源"></el-option>
						<el-option :value="2" label="文献资源"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="管线资源" class="m_r_20" v-if="nrForm.type == 1">
					<el-select v-model="nrForm.language"  class="m_r_20"  @change="getResource" >
						<el-option :value="0" label="简体"></el-option>
						<el-option :value="1" label="繁体"></el-option>
						<el-option :value="2" label="英文"></el-option>
					</el-select>
					<el-select v-if="opt1" v-model="nrForm.resource_id"  class="m_r_20">
						<el-option
							v-for="item in opt1"
							:key="item.id"
							:value="item.id"
							:label="item.name"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="文献资源" class="m_r_20" v-if="nrForm.type == 2">
					<el-select v-model="nrForm.language"  class="m_r_20" @change="getResource">
						<el-option :value="0" label="简体"></el-option>
						<el-option :value="1" label="繁体"></el-option>
						<el-option :value="2" label="英文"></el-option>
					</el-select>
					<el-select v-model="nrForm.resource_id"  class="m_r_20">
						<el-option
							v-for="item in opt1"
							:key="item.id"
							:value="item.id"
							:label="item.name"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="管线资源" class="m_r_20">
					<UE ref="UE" :value="nrForm.content"></UE>
				</el-form-item>
			</el-form>
			
			<span slot="footer" class="dialog-footer">
				<el-button @click="close2">取 消</el-button>
				<el-button type="primary" @click="sub2">确 定</el-button>
			</span>
		</el-dialog>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				isShow1: false,
				isShow2: false,
				opt:[],
				opt1:[],
				gx:[],
				gx_id:'',
				gxForm:{
					preclinical: [],
					phase1: [],
					phase2: [],
					phase3: [],
					nda:[],
					area: '',
					clinical_area:'',
					origin:'',
					adaptability:''
				},

				nr:[],
				nr_id:'',
				nrForm:{
					title:'',
					type:2,
					language:0,
					resource_id:'',
					content:''
				},
				
				form: {
					id:'',
					name:'',
					target:'',
					synopsis:'',
					subtitle:'',
					category_id:'',
					data:[],
					content:[]
				},
				upImg:{
					label: '图片',
					imageUrl: '',
					name: 'file',
					width: '1080',
					height: '768',
					file: ''
				},

				//图片上传
				imageUrl: '',
				// dialogVisible: false,
				// disabled: false
			}
		},
		methods: {
			
			getDetail(id){
				let params = {
					id:id,
					language: this.$store.getters.getLanguage,
					
				}
				this.axiosPost('Development/productShow' , params , res => {
					if(res.data.code == 0) {
						let form1 = res.data.data;
						this.form = {
							id:form1.id,
							name:form1.name,
							target:form1.target,
							subtitle:form1.subtitle,
							synopsis:form1.synopsis,
							category_id:form1.category_id
						}
						if(form1.pipeline) {
							form1.pipeline.forEach((item) => {
								
								this.gxForm = {
									preclinical:item.preclinical ? item.preclinical.split(',') : [],
									phase1:item.phase1 ? item.phase1.split(',') : [],
									phase2:item.phase2 ? item.phase2.split(',') : [],
									phase3:item.phase3 ? item.phase3.split(',') : [],
									nda:item.nda ? item.nda.split(',') : [],
									area:item.area,
									clinical_area:item.clinical_area,
									origin:item.origin,
									adaptability:item.adaptability
								}
								this.gx.push({
									preclinical:item.preclinical,
									phase1:item.phase1,
									phase2:item.phase2,
									phase3:item.phase3,
									nda:item.nda,
									area:item.area,
									clinical_area:item.clinical_area,
									origin:item.origin,
									adaptability:item.adaptability
								})
								console.log(this.gxForm);
							})
						} 
						if(form1.content){
							form1.content.forEach((item) => {
								
								this.nrForm = {
									title:item.title,
									type:item.type,
									language:item.language,
									resource_id:item.resource_id,
									content:item.content
								}
								this.nr.push(this.nrForm);
							})
						}
						
						// this.type = this.form.type*1;
						console.log(this.form);
					}
				})
			},
			
			
			//获取资源
			getResource(){
				// this.nrForm.resource_id = ';'
				let params = {
					type:this.nrForm.type,
					language:this.nrForm.language
				}
				
				this.axiosPost('Development/resourcesList' , params , res => {
					if(res.data.code == 0) {
						this.opt1 = res.data.data.data
					}
				})
			},
			
			
			//产品管线
			addgx() {
				this.isShow1 = true;
			},
			editgx(scope,index) {
				this.gxForm = scope;
				this.gx_id = index;
				this.gxForm.preclinical = scope.preclinical ? scope.preclinical.split(',') : []
				this.gxForm.phase1 =  scope.phase1 ? scope.phase1.split(',') : []
				this.gxForm.phase2 =  scope.phase2 ? scope.phase2.split(',') : []
				this.gxForm.phase3 =  scope.phase3 ? scope.phase3.split(',') : []
				this.gxForm.nda =  scope.nda ? scope.nda.split(',') : []
				this.isShow1 = true;
			
			},
			deletegx(scope) {
				this.gx.splice(scope.$index, 1);
			},
			sub1() {
				console.log(this.gxForm);
				let gxForm1 = {
					preclinical: this.gxForm.preclinical.toString(),
					phase1: this.gxForm.phase1.toString(),
					phase2: this.gxForm.phase2.toString(),
					phase3: this.gxForm.phase3.toString(),
					nda:this.gxForm.nda.toString(),
					area: this.gxForm.area,
					clinical_area:this.gxForm.clinical_area,
					origin:this.gxForm.origin,
					adaptability:this.gxForm.adaptability
				}
				
				if(this.gx_id >= 0 && this.gx_id !== '') {
					console.log(this.gx_id);
					this.gx.splice(this.gx_id , 1 , gxForm1);
				}else {
					this.gx.push(gxForm1);
				}
				// this.gx.push(gxForm1);
				this.close1()
			},
			close1() {
				this.gxForm = {
					preclinical: [],
					phase1: [],
					phase2: [],
					phase3: [],
					nda:[],
					area: '',
					clinical_area:'',
					origin:'',
					adaptability:''
				}
				this.gx_id = '';
				this.isShow1 = false;
			},





			//内容
			addnr(){
				this.isShow2 = true;
			},
			editnr(scope,index){
				this.nrForm = scope;
				this.nr_id = index;
				this.getResource();
				console.log(this);
				setTimeout(() => {
					this.$refs.UE.setContent(scope.content)
				},500)
				this.isShow2 = true;

			},
			deletenr(scope){
				this.nr.splice(scope.$index , 1);
			},
			sub2(){
				this.nrForm.content = this.$refs.UE.getUEContent()
				console.log(this.nrForm);
				
				if(this.nr_id >= 0 && this.nr_id !== '') {
					console.log(this.nr_id);
					this.nr.splice(this.nr_id , 1 , this.nrForm);
				}else {
					this.nr.push(this.nrForm);
				}
				// this.nr.push(this.nrForm);
				this.close2()
			},
			close2(){
				this.nrForm = {
					title:'',
					type:0,
					language:'',
					resource_id:'',
					content:''
				};
				this.$refs.UE.setContent('')
				this.nr_id = ''
				this.isShow2 = false;
			},




			//提交
			submit(){
				this.form.data = this.gx;
				this.form.content = this.nr;
				console.log(this.form);
				let params = this.form;
				params.language = this.$store.getters.getLanguage
				if(this.form.id) {
					this.edit(params);
				} else {
					this.add(params)
				}
			},
			
			
			//新增
			add(params){
				this.axiosPost('Development/productAdd', params , res => {
					if(res.data.code === 0) {
						this.msgSuccess(res.data.message);
						this.$parent.getTableData();
						this.isShow = false;
					}
				})
			},
			
			//编辑
			edit(params) {
				this.axiosPost('Development/productEdit', params , res => {
					if(res.data.code === 0) {
						this.msgSuccess(res.data.message);
						this.$parent.getTableData();
						this.isShow = false;
					}else {
						this.msgError(res.data.message)
					}
				})
			},


			//关闭窗口 清空数据
			closeDialog(){
				this.form = {
					id:'',
					name:'',
					target:'',
					synopsis:'',
					subtitle:'',
					category_id:'',
					data:[],
					content:[]
				}
				this.gx = [];
				this.nr = [];
				this.gxForm = {
					preclinical: [],
					phase1: [],
					phase2: [],
					phase3: [],
					nda:[],
					area: '',
					clinical_area:'',
					origin:'',
					adaptability:''
				}
				this.nrForm = {
					title:'',
					type:0,
					language:'',
					resource_id:'',
					content:''
				}
				this.gx_id = ''
				this.nr_id = ''
				this.isShow = false;
			}
		}
	}
</script>

<style scoped>

</style>
